@import "~@/styles/mixin.scss";
@import "~@/styles/color.scss";


/* 颜色变量 */
// 白色
$color-white: #FFFFFF;
// 红色
$color-red: #F25F5F;
// 绿色
$color-green: #C0EDAB;
// 蓝色
$color-blue: #AEDEE8;
// 黄色
$color-yellow: #FBFCD4;
// 紫色
$color-purple: #E1DBF3;
// 橘色
$color-orange: #FFCBB3;
// 灰色
$color-gray: #CCCCCC;
// 黑色
$color-black: #000000;

/* 尺寸变量 */
$size-px5: 5px;
$size-px10: 10px;
$size-px15: 15px;
$size-px20: 20px;

.m-5 {
	margin: $size-px5;
}

.m-10 {
	margin: $size-px10;
}

.m-15 {
	margin: $size-px15;
}

.m-20 {
	margin: $size-px20;
}

.m-15 {
	margin: $size-px15;
}

.m-l-r-5 {
	margin: 0 5px;
}

.m-l-r-10 {
	margin: 0 10px;
}

.m-l-r-15 {
	margin: 0 15px;
}

.m-t-5 {
	margin-top: $size-px5;
}

.m-t-10 {
	margin-top: $size-px10;
}

.m-t-15 {
	margin-top: 15px;
}

.m-t-20 {
	margin-top: 20px;
}

.m-l-10 {
	margin-left: $size-px10;
}

.m-l-15 {
	margin-left: 15px;
}

.m-l-20 {
	margin-left: 20px;
}

.m-l-10 {
	margin-left: $size-px10;
}

.m-r-5 {
	margin-right: $size-px5;
}

.m-r-10 {
	margin-right: $size-px10;
}

.m-r-20 {
	margin-right: 20px;
}

.m-b-5 {
	margin-bottom: $size-px5;
}

.m-b-10 {
	margin-bottom: $size-px10;
}

.m-b-15 {
	margin-bottom: 15px;
}

.m-b-20 {
	margin-bottom: 20px;
}

.m-b-0 {
	margin-bottom: 0px;
}

.p-5 {
	padding: $size-px5;
}

.p-10 {
	padding: $size-px10;
}

.p-15 {
	padding: 15px;
}

.p-20 {
	padding: 20px;
}

.p-l-r-10 {
	padding: 0 10px;
}

.p-l-r-15 {
	padding: 0 15px;
}

.p-l-r-20 {
	padding: 0 20px;
}

.p-tb-20 {
	padding: 20px 0;
}

.p-l-20 {
	padding-left: 20px;
}

.p-r-20 {
	padding-right: 20px;
}

.p-t-10 {
	padding-top: $size-px10;
}

.p-t-15 {
	padding-top: 15px;
}

.p-t-20 {
	padding-top: 20px;
}

.p-b-20 {
	padding-bottom: 20px;
}

.text-center {
	text-align: center;
}

.btn-w-80 {
	width: 80px;
}

.btn-w-90 {
	width: 90px;
}

.btn-w-110 {
	width: 110px;
}

.table .el-button--mini, .el-button--mini.is-round {
	padding: 6px 8px !important;
}

.bg-white {
	background: #fff;
}

.page {
	background-color: #F2F3F3;
	height: auto;
	padding: 10px 0;
}

.red-text {
  color: red;
}

/* 搜索 */
.page .search {
	background-color: #FFFFFF;
	margin: 0 10px;
	padding: 0 0 10px 10px;
}

.page .search .el-button.is-disabled, .el-button.is-disabled:focus, .el-button.is-disabled:hover {
	font-size: 12px !important;
}

.table {
	margin: 10px 10px 0 10px;
}

.table .table_bg {
	padding: 5px;
	background-color: #FFFFFF;
}

/* 分页 */
.page_size {
	margin: 10px 10px 10px 10px;
	padding: 10px;
	background-color: #FFFFFF;
}

.page_size .el-pagination__total {
	margin-top: 5px;
}

.page_size .el-pager {
	margin-top: 5px;
}

.page_size .el-icon-arrow-left {
	margin-top: 5px;
}

.page_size .el-icon-arrow-right {
	margin-top: 5px;
}

.page_size .el-pagination__jump {
	margin-top: 5px;
}

/* 表格标题 */
.page_title {
	font-size: 20px;
	margin: 5px 0 0 9px;
}

.page_title .iconfont {
	color: #3a70ea;
}

.picture {
	margin: 10px 10px 0 10px;
	padding: 5px;
	background-color: #FFFFFF;
}

/* checkbox选中当前行 */
.vxe-table--render-default .vxe-body--row.row--checked, .vxe-table--render-default .vxe-body--row.row--radio {
	background-color: #3a70ea !important;
	color: #fff !important;
}


/* vxe-table高亮选中行状态 */
.vxe-table--render-default .vxe-body--row.row--current {
	background-color: $color-yellow !important;
	color: $color-black !important;
}

/* vxe-table表格字体颜色 */
.vxe-table--render-default {
	color: #000000 !important;
}

/* 底部声明 */
.bottom_msg {
	background-color: #FFFFFF;
	margin: 10px 10px 0px 10px;
	text-align: center;
	padding: 6px 0;
}

/* 表格行高 */
/* .vxe-table--render-default.size--mini .vxe-body--column.col--ellipsis, .vxe-table--render-default.size--mini .vxe-footer--column.col--ellipsis, .vxe-table--render-default.size--mini .vxe-header--column.col--ellipsis, .vxe-table--render-default.vxe-editable.size--mini .vxe-body--column {
  height: 30px !important;
} */



/* 行状态注释 */
.state-note {
  border-radius: 50%;
  box-shadow: 0px 0px 3px -1px rgba(0,0,0,0.9);
}

/* -----状态行颜色----- */
/* 作废 */
.state-invalid {
	background: $color-red;
	color: $color-white;
}
/* 有效 */
.state-effective {
	background: $color-green;
}

/* -----按钮----- */
// 蓝色
.btn-blue {
  background: $color-blue;
  padding: 3px;
}
// 橘色
.btn-orange {
  background: $color-orange;
  padding: 3px;
}
// 绿色
.btn-green {
  background: $color-green;
  padding: 3px;
}
//清新绿
.btn-green2 {
  background: #16b777;
  color: #FFFFFF;
  padding: 3px;
}
// 紫色
.btn-purple {
  background: $color-purple;
  padding: 3px;
}
// 红色
.btn-purple {
  background: $color-red;
  padding: 3px;
}
// 黄色
.btn-purple {
  background: #ffb800;
  padding: 3px;
}
// 灰色
.btn-gray {
  background: $color-gray;
  padding: 3px;
}
// 棕色
.btn-brown {
  background: #9b602f;
  color: #FFFFFF;
  padding: 3px;
}


/* 搜索样式 */
.search {
	background-color: #ffffff;
	margin: 10px 0 10px 0;
	padding: 10px 0 0px 10px;
	@include flex-justify-start;
	flex-wrap: wrap; //需要时换行

	.item {
		margin-right: 25px;
		margin-bottom: 10px;
		@include flex-justify-start;

		.input {
			@include flex-justify-start;

			.label {
				display: block;
				font-size: 14px;
				color: #606266;

				display: flex;
				align-items: center;
				justify-content: start;
			}

			.element {
				width: 160px;
			}
		}
	}
}
